<template>
  <div>
    <h2>数据集管理 - 人工标注</h2>
    <div v-if="!dataLoaded">
      <input type="file" @change="importData">
    </div>
    <div v-else>
      <div v-for="(item, index) in data" :key="index">
        <p>{{ item.content }}</p>
        <label v-for="label in labels" :key="label">
          <input type="checkbox" :value="label" v-model="item.selectedLabels">
          {{ label }}
        </label>
        <button @click="saveAnnotation(index)">保存标注</button>
      </div>
      <button @click="exportData">导出数据</button>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'AnnotationComponent',
  setup() {
    const data = ref([]);
    const labels = ref(['标签1', '标签2', '标签3']);
    const dataLoaded = ref(false);

    const importData = (event) => {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          data.value = JSON.parse(e.target.result);
          dataLoaded.value = true;
        };
        reader.readAsText(file);
      }
    };

    const saveAnnotation = (index) => {
      // 这里可以添加数据质量检查逻辑
      if (!isValidAnnotation(data.value[index])) {
        alert('标注数据无效');
        return;
      }
      // 保存标注数据到数据库或其他存储
      console.log('保存标注:', data.value[index]);
    };

    const exportData = () => {
      const exportedData = data.value.map(item => ({
        content: item.content,
        labels: item.selectedLabels
      }));
      const blob = new Blob([JSON.stringify(exportedData)], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'annotated_data.json';
      link.click();
      URL.revokeObjectURL(url);
    };

    const isValidAnnotation = (annotation) => {
      // 检查标注数据的有效性
      return annotation.selectedLabels.length > 0;
    };

    return {
      data,
      labels,
      dataLoaded,
      importData,
      saveAnnotation,
      exportData
    };
  }
};
</script>

<style scoped>
/* 样式可以根据需要进行调整 */
</style>
